<template>
  <div class="login">
    <div class="header">面经{{ isLogin ? "登录" : "注册" }}</div>
    <div class="content">
      <div class="account">
        用户名
        <div>
          <input
            type="text"
            placeholder="用户名"
            :class="{ 'placeholder-color': aEmpty ? 'red' : '' }"
            v-model="account"
          />
          <div :class="pEmpty ? 'toast' : 'non'">请填写用户名</div>
        </div>
      </div>
      <div class="password">
        密码
        <div>
          <input
            type="password"
            placeholder="密码"
            :class="{ 'placeholder-color': pEmpty ? 'red' : '' }"
            v-model="password"
          />
          <div :class="pEmpty ? 'toast' : 'non'">请填写密码</div>
        </div>
      </div>
    </div>
    <van-button
      type="primary"
      :color="isLogin ? '#fa6d1d' : '#07c160'"
      size="large"
      @click="submit"
      >{{ isLogin ? "提交" : "注册" }}</van-button
    >
    <div class="footer" v-if="isLogin">
      没有账号？<router-link to="/register">注册</router-link>
    </div>

    <div class="footer" v-else>
      已有账号？<router-link to="/login">登录</router-link>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";

export default {
  name: "LrPage",
  data() {
    return {
      account: "",
      password: "",
      aEmpty: false,
      pEmpty: false,
      isLogin: false,
    };
  },
  created() {
    if (this.info === "login") {
      this.isLogin = true;
      this.account = this.userInfo.account;
    }
  },
  props: {
    info: {
      type: String,
      required: true,
    },
    userInfo: {
      type: Object,
      required: false,
      default() {
        return {
          account: "",
          password: "",
        };
      },
    },
  },
  methods: {
    submit() {
      if (!this.account.trim()) {
        this.aEmpty = true;
        setTimeout(() => {
          this.aEmpty = false;
        }, 3000);
      }
      if (!this.password.trim()) {
        this.pEmpty = true;
        setTimeout(() => {
          this.pEmpty = false;
        }, 3000);
      }
      if (this.aEmpty && this.pEmpty) {
        return;
      }

      if (this.isLogin) {
        console.log(this.account, this.password);
        axios
          .post("http://interview-api-t.itheima.net/h5/user/login", {
            username: this.account,
            password: this.password,
          })
          .then((res) => {
            if (res.request.status === 200) {
              Toast("登录成功");
              localStorage.setItem("token", res.data.token);
              this.$router.push("/layout/article");
            } else {
              //给用户一个轻量级的提示

              Toast(res.data.msg);
            }
          })
          .catch((err) => {
            Toast(err.response.data.message);
          });
      } else {
        axios
          .post(
            "http://interview-api-t.itheima.net/h5/user/register",
            {
              username: this.account,
              password: this.password,
            },
            {
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
              },
            }
          )
          .then((res) => {
            console.log(res.request.status);

            if (res.request.status === 200) {
              Toast("注册成功");
              this.$router.push({
                name: "login",
                query: {
                  info: {
                    account: this.account,
                    password: this.password,
                  },
                },
              });
            } else {
              Toast(res.data.msg);
            }
          })
          .catch((err) => {
            Toast(err.response.data.message);
          });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  padding: 0 15px;
}
.header {
  text-align: center;
  height: 50px;
  line-height: 50px;
}

.content {
  color: #646566;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  .toast {
    color: red;
  }
  .non {
    color: white;
  }

  line-height: 20px;
  .account {
    width: 100%;
    margin-bottom: 30px;
    display: flex;

    justify-content: space-between;
    input {
      width: 70vw;
      right: 0;

      border: none;
    }
  }
  .password {
    width: 100%;
    margin-bottom: 30px;
    display: flex;

    justify-content: space-between;
    input {
      width: 70vw;
      right: 0;
      border: none;
    }
  }
}

.footer {
  font-size: 14px;
  text-align: right;
  margin-top: 20px;
  a {
    color: #0881d8;
  }
}

.placeholder-color::placeholder {
  color: red;
}
</style>
